<template>
	<view class="flex align-center px-5 py-3">
		<view class="flex-1 flex align-center justify-center"
		v-for="(item,index) in providerList" :key="index"
		@click="login(item)">
			<view :class="item.icon + ' '+item.bgColor" class="iconfont font-lg text-white flex align-center justify-center rounded-circle" style="width: 100rpx;height: 100rpx;"></view>
		</view>
		
	</view>
</template>

<script>
	import {getUserOrtherList} from "@/network/login.js"
	import api from '@/conf/api.js';
	const demo = [{
				name: '微信登录',
				id: 'weixin',
				status:1,
				icon:'icon-weixin',
				bgColor:'bg-success'
			},{
				name: 'QQ登录',
				id: 'qq',
				status:2,
				icon:'icon-QQ',
				bgColor:'bg-primary'
			},{
				name: '新浪微博登录',
				id: 'sinaweibo',
				status:3,
				icon:'icon-xinlangweibo',
				bgColor:'bg-warning'
			}]
	export default {
		props: {
			back: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				providerList: []
			}
		},
		mounted(){
			this.providerList = demo
		},
		methods: {
			// 登录
			login(item) {
				uni.login({
					provider: item.id,
					// #ifdef MP-ALIPAY
					// scopes: '	',  //支付宝小程序需设置授权类型
					// #endif
					success: res => {
						console.log(res);
					   // 获取用户信息
					   uni.getUserInfo({
						 provider: item.id,
						 success:(infoRes)=> {
						    let obj = {
								status:item.status,
								openid:infoRes.userInfo.openId,
								nickname:infoRes.userInfo.nickName,
								avatarUrl:infoRes.userInfo.avatarUrl,
							}
							getUserOrtherList(obj).then(attr=>{
								let [err,res] = attr
								console.log(res.data)
								if(res.data.status){
									let list = {...res.data.data,...res.data.user_other}
									this.$store.commit('initUserInfo',list)
									this.$store.dispatch("openSocket")
									api.token = res.data.data.token
									uni.$emit("Logout")
									uni.navigateBack({
										delta:1
									})
								}else{
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									});
								}
							})
						 }
					   });
					},
					fail: () => {
						uni.showToast({
							title: '登录失败',
							icon: 'none'
						});
					},
				});
			},
			// #ifdef MP-WEIXIN
			mpGetUserInfo(result) {
				uni.showLoading({ title: '登录中...', mask: true });
				// 获取失败
				if (result.detail.errMsg !== 'getUserInfo:ok') {
					uni.hideLoading();
					uni.showModal({
						title: '获取用户信息失败',
						content: '错误原因' + result.detail.errMsg,
						showCancel: false
					});
					return;
				}
				let userinfo = result.detail.userInfo;
				uni.login({
					provider:"weixin",
					success: (res) => {
						this.MpLogin({
							url:"/wxlogin",
							code:res.code,
							nickName:userinfo.nickName,
							avatarUrl:userinfo.avatarUrl
						})
					},
					complete: () => {
						uni.hideLoading();
					}
				})
			},
			// #endif
			MpLogin(options){
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					});
			},
		},
	}
</script>

<style>
	
</style>
